<template>
	<div class="divmain" style="padding: 0px 20px 0px 20px;display: block;height: 100%;">
		<div ref="divForm" style="padding: 20px 0px;">
			<el-form inline :model="formData">
				<el-row>
					<el-col :span="24">
						<el-form-item label="部门/公司 :" prop="CompanyId">
							<el-select v-model="formData.CompanyId" placeholder="请选择部门/公司" clearable filterable>
								<el-option v-for="item in CompanyList" :value="item.Id" v-show="!item.Delete"
									:label="item.CompanyName"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="项目:" prop="ProjectId">
							<el-select v-model="formData.ProjectId" placeholder="请选择项目" clearable filterable>
								<el-option v-for="item in ProjectList" :value="item.Id" v-show="!item.Delete"
									:label="item.ProjectName"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="甲方:" prop="PartyA">
							<el-select v-model="formData.PartyA" placeholder="甲方:" clearable filterable>
								<el-option v-for="item in SupplierList" :value="item.Id" v-show="!item.Delete"
									:label="item.Name"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="供应商/经办人:" prop="SupplierId">
							<el-select v-model="formData.SupplierId" placeholder="供应商/经办人" clearable filterable>
								<el-option v-for="item in SupplierList" :value="item.Id" v-show="!item.Delete"
									:label="item.Name"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="类别:" prop="CostTypeId">
							<el-select v-model="formData.CostTypeId" placeholder="类别" clearable filterable>
								<el-option v-for="item in CostTypeList" :value="item.Id" v-show="!item.Delete"
									:label="item.CostName"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="摘要" prop="Abstract">
							<el-input v-model="formData.Abstract" placeholder="摘要"></el-input>
						</el-form-item>
						<el-form-item label="开始时间:" prop="StartDate">
							<el-date-picker v-model="formData.StartDate" value-format="yyyy-MM-dd"
								clearable></el-date-picker>
						</el-form-item>
						<el-form-item label="结束时间:" prop="EndDate">
							<el-date-picker v-model="formData.EndDate" value-format="yyyy-MM-dd"
								clearable></el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="getTableData">查询</el-button>
						</el-form-item>
					</el-col>

				</el-row>
				<el-row>
					<el-col :span="24">
						<el-button type="success" @click="dialogAddForm.show = true">新建明细</el-button>
						<el-button type="primary" @click="ExportAllHandler">导出全部数据</el-button>
						<el-button type="warning" @click="ExportByGetListHandler">导出筛选数据</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div :style="tableHeight">
			<el-table ref="expenditureRef" height="100%" :data="tableData" border show-summary :summary-method="getSummaries" v-loading="pagination.loading">
				<!-- <el-table-column type="selection" width="40" align="center"></el-table-column> -->
				<el-table-column type="index" label="序号" width="50" align="center" fixed
					:index="indexMethod"></el-table-column>
				<el-table-column label="日期" align="center" prop="BankName" width="150" fixed>
					<template slot-scope="scope">
						{{ timefomat(scope.row.CreateDate) }}
					</template>
				</el-table-column>
				<el-table-column label="公司" align="center" prop="BankName" width="220">
					<template slot-scope="scope">
						{{ getMessage(scope.row,'Company')!=undefined? getMessage(scope.row,'Company').CompanyName:'' }}
					</template>
				</el-table-column>
				<el-table-column label="项目编号" align="center" prop="BankName" width="220">
					<template slot-scope="scope">
						{{ getMessage(scope.row,'Project')!=undefined?getMessage(scope.row,'Project').ProjectNumber:'' }}
					</template>
				</el-table-column>
				<el-table-column label="项目名称" align="center" prop="BankName" width="220">
					<template slot-scope="scope">
						{{ getMessage(scope.row,'Project') !=undefined? getMessage(scope.row,'Project').ProjectName:'' }}
					</template>
				</el-table-column>
				<el-table-column label="类别" align="center" prop="BankName" width="120">
					<template slot-scope="scope">
						{{ getMessage(scope.row,'CostType')!=undefined ? getMessage(scope.row,'CostType').CostName:'' }}
					</template>
				</el-table-column>
				<el-table-column label="摘要" align="center" prop="Abstract" width="220" fixed></el-table-column>
				<el-table-column label="银行支出(对公)" align="center" prop="BankOut" width="220"></el-table-column>
				<el-table-column label="现金支出" align="center" prop="MoneyOut" width="220"></el-table-column>
				<el-table-column label="银行收入" align="center" prop="BankIn" width="220"></el-table-column>
				<el-table-column label="现金收入" align="center" prop="MoneyIn" width="220"></el-table-column>
				<el-table-column label="银行卡余额" align="center" prop="BankBalance" width="220"></el-table-column>
				<el-table-column label="现金余额" align="center" prop="MoneyBalance" width="220"></el-table-column>
				<el-table-column label="主银行卡余额" align="center" prop="MasterBankBalance" width="220">
					<template slot-scope="scope">
						<p v-if="formData.CompanyId == '' && formData.ProjectId== ''" style="color: #67C23A;">
							{{ scope.row.MasterBankBalance }}</p>
						<p v-else style="color:#E6A23C ;">---</p>
					</template>
				</el-table-column>
				<el-table-column label="总余额" align="center" prop="MasterBalance" width="220">
					<template slot-scope="scope">
						<p v-if="formData.CompanyId == '' && formData.ProjectId== ''" style="color: #67C23A;">
							{{ scope.row.MasterBalance }}</p>
						<p v-else style="color:#E6A23C ;">---</p>
					</template>
				</el-table-column>
				<el-table-column label="甲方" align="center" prop="BankName" width="220">
					<template slot-scope="scope">
						{{getMessage(scope.row,'ParkA')!=undefined?getMessage(scope.row,'ParkA').Name:'' }}
					</template>
				</el-table-column>
				<el-table-column label="供应商/经办人" align="center" prop="BankName" width="220">
					<template slot-scope="scope">
						{{ getMessage(scope.row,'Supplier')!=undefined?getMessage(scope.row,'Supplier').Name:'' }}
					</template>
				</el-table-column>
				<el-table-column label="发票情况" align="center" prop="BankName">
					<template slot-scope="scope">
						<p v-if="scope.row.invoice==0" style="color: #E6A23C;">无发票</p>
						<p v-else style="color:#67C23A ;">有发票</p>
					</template>
				</el-table-column>
				<el-table-column label="合同" align="center" prop="contract">
					<template slot-scope="scope">
						<p v-if="scope.row.contract==0" style="color: #E6A23C;">无合同</p>
						<p v-else style="color:#67C23A ;">有合同</p>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="160">
					<template slot-scope="scope">
						<el-button plain type="primary" size="mini" style="margin-left: 10px;"
							@click="dialogUpdataFormEvent(scope.row)">详情</el-button>
						<!-- <el-button plain type="primary" size="mini" style="margin-left: 10px;" @click="GetFormExcel(scope.row)">导出</el-button> -->
						<el-popconfirm title="这是一段内容确定删除吗" @confirm="deletePayrollDetails(scope.row)"
							style="padding-left: 10px;">
							<el-button slot="reference" plain type="danger" size="mini">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-row>
			<el-col :span="24" align="right">
				<el-pagination @size-change="getTableData" @current-change="getTableData"
					:current-page.sync="pagination.currentPage" :page-sizes="pagination.pagesizes"
					:page-size.sync="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper"
					:total.sync="pagination.total">
				</el-pagination>
			</el-col>
		</el-row>	
		<el-dialog :visible.sync="dialogAddForm.show" :title="dialogAddForm.title" @close="dialogAddFormCloseEvent">
			<AddExpenditure :closeFun="closeFun" :BankList="BankList" :CompanyList="CompanyList" :isShow="dialogAddForm.show"
				:ProjectList="ProjectList" :SupplierList="SupplierList" :CostTypeList="CostTypeList"
				ref="AddExpenditureRef"></AddExpenditure>
		</el-dialog>
		<el-dialog :visible.sync="dialogUpdataForm.show" :title="dialogUpdataForm.title">
			<UpExpenditure :closeFun="closeFun" :BankList="BankList" :CompanyList="CompanyList"
				:ProjectList="ProjectList" :SupplierList="SupplierList" :CostTypeList="CostTypeList"
				:updata="dialogUpdataForm.updata" ref="UpExpenditureRef"></UpExpenditure>
		</el-dialog>
	</div>
</template>

<script>
	import * as publicjs from "../../../public/Scriput/Public"
	import * as dayjs from 'dayjs'
	import AddExpenditure from './AddExpenditure.vue'
	import UpExpenditure from './UpExpenditure.vue'
	export default {
		components: {
			AddExpenditure,
			UpExpenditure
		},
		data() {
			return {
				formData: {
					// StartDate: dayjs().subtract(30,'day').format('YYYY-MM-DD'),
					StartDate: null,
					EndDate: dayjs(Date()).format('YYYY-MM-DD'),
					CompanyId: '',
					ProjectId: '',
					SupplierId: '',
					PartyA: '',
					CostTypeId:'',
					Abstract:'',
				},
				tableData: [],
				//分页数据绑定
				pagination: {
					loading:false,
					currentPage: 1,
					pagesizes: [10, 100, 500, 1000, 3000],
					pagesize: 500,
					total: 0
				},
				dialogAddForm: {
					show: false,
					title: '新建明细'
				},
				dialogUpdataForm: {
					show: false,
					title: '修改明细信息',
					updata: {},
				},
				CompanyList: [],
				ProjectList: [],
				BankList: [],
				SupplierList: [],
				CostTypeList: [],
				tableHeight:''
			}
		},
		created() {
			publicjs.http(this.$http, this.$message)
			this.getCompanyList()
			this.getProjectList()
			this.getBankList()
			this.getSupplierList()
			this.getCostTypeList()
		},
		mounted() {
			let _this = this
			this.$nextTick(() => {
				this.getTableData()
				this.getdivHeight()
			})
			
			window.addEventListener('resize',()=>{
				this.getdivHeight()
			})
		},
		updated() {
			//刷新表格dom，合计不显示问题
			this.$refs.expenditureRef.doLayout()
		},
		methods: {
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '合计';
						return;
					}
					if (index < 7 || index > 10) {
						sums[index] = '';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								let sumresult = parseFloat(prev) + parseFloat(curr)
								return sumresult.toFixed(2);
							} else {
								return parseFloat(prev).toFixed(2);
							}
						}, 0);
						sums[index] += ' 元';
					} else {
						sums[index] = '';
					}
				});

				return sums;
			},
			//表格序号
			indexMethod(index) {
				return index + 1
			},
			getTableData() {
				this.pagination.loading = true
				this.$http.post('/api/Expenditure/GetList/query', {
					StartDate: this.formData.StartDate,
					EndDate: this.formData.EndDate,
					CompanyId: this.formData.CompanyId == '' ? 0 : this.formData.CompanyId,
					ProjectId: this.formData.ProjectId == '' ? 0 : this.formData.ProjectId,
					SupplierId: this.formData.SupplierId == '' ? 0 : this.formData.SupplierId,
					PartyA: this.formData.PartyA == '' ? 0 : this.formData.PartyA,
					CostTypeId: this.formData.CostTypeId == '' ? 0 : this.formData.CostTypeId,
					Abstract: this.formData.Abstract.trim(),
					PageNumber: this.pagination.currentPage,
					PageSize: this.pagination.pagesize,
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						this.tableData = Data.Data
					} else {
						this.tableData = []
						this.$message.warning(Message)
					}
					this.pagination.total = Data.Total
					setTimeout(()=>{ this.pagination.loading = false },500)
				}).catch(()=>{
					setTimeout(()=>{ this.pagination.loading = false },500)
				})
			},
			closeFun() {
				this.getTableData()
			},
			dialogAddFormCloseEvent() {
				this.$refs.AddExpenditureRef.resetFieldsEvent()
			},
			deletePayrollDetails(row) {
				this.$http.post('/api/Expenditure/Delete/delete', {
					Ids: [row.Id]
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						this.$message.success('删除成功')
						this.getTableData()
					} else {
						this.$message.warning(Message)
					}
				})
			},
			dialogUpdataFormEvent(row) {
				this.dialogUpdataForm.updata = row
				this.dialogUpdataForm.show = true
			},
			getCompanyList() {
				this.$http.post('/api/Values/GetCompany').then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) this.CompanyList = Data.Data
					else this.tableData = []
				})
			},
			getProjectList() {
				this.$http.post('/api/Values/GetProject').then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) this.ProjectList = Data.Data
					else this.ProjectList = []
				})
			},
			getBankList() {
				this.$http.post('/api/Values/GetBankinfo').then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) this.BankList = Data.Data
					else this.BankList = []
				})
			},
			getSupplierList() {
				this.loading = true
				this.$http.post('/api/Values/GetSupplier').then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) this.SupplierList = Data.Data
					else this.SupplierList = []
				})
			},
			getCostTypeList() {
				this.loading = true
				this.$http.post('/api/Values/GetCostType').then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) this.CostTypeList = Data.Data
					else this.CostTypeList = []
				})
			},
			getMessage(row, type) {
				let obj = {}
				switch (type) {
					case 'Company':
						obj = this.CompanyList.find(x => x.Id == row.CompanyId)
						break;
					case 'Project':
						obj = this.ProjectList.find(x => x.Id == row.ProjectId)
						break;
					case 'Bank':
						obj = this.BankList.find(x => x.Id == row.BankId)
						break;
					case 'Supplier':
						obj = this.SupplierList.find(x => x.Id == row.SupplierId)
						break;
					case 'CostType':
						obj = this.CostTypeList.find(x => x.Id == row.CostTypeId)
						break;
					case 'ParkA':
						let ProjectObj = this.ProjectList.find(x => x.Id == row.ProjectId)
						if(ProjectObj!=undefined) obj = this.SupplierList.find(x => x.Id == ProjectObj.PartyA)
						else obj = undefined
						break;
				}
				return obj
			},
			timefomat(time) {
				return dayjs(time).format('YYYY-MM-DD')
			},
			//导出数据表格
			ExportByGetListHandler(row) {
				this.$http.post('api/Expenditure/ExportByGetList/ExportByGetList', {
					StartDate: this.formData.StartDate,
					EndDate: this.formData.EndDate,
					CompanyId: this.formData.CompanyId == '' ? 0 : this.formData.CompanyId,
					ProjectId: this.formData.ProjectId == '' ? 0 : this.formData.ProjectId,
					SupplierId: this.formData.SupplierId == '' ? 0 : this.formData.SupplierId,
					PartyA: this.formData.PartyA == '' ? 0 : this.formData.PartyA,
					CostTypeId: this.formData.CostTypeId == '' ? 0 : this.formData.CostTypeId,
					PageNumber: this.pagination.currentPage,
					PageSize: this.pagination.pagesize,
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						//文件下载
						// publicjs.DownLoadFile({ ...Data })
						let path = Data.Message.replace(/\\/g, "/");
						window.location.href = this.$http.defaults.baseURL + "/" + path
					} else {
						this.$message.warning(Message)
					}
				})
			},
			//
			ExportAllHandler() {
				this.$http.post('api/Expenditure/ExportAll/ExportAll').then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						//文件下载
						// publicjs.DownLoadFile({ ...Data })
						let path = Data.Message.replace(/\\/g, "/");
						window.location.href = this.$http.defaults.baseURL + "/" + path
					} else {
						this.$message.warning(Message)
					}
				})
			},
			//获取高度
			getdivHeight(){
				let idvcheight = this.$refs.divForm.clientHeight
				let asda  = idvcheight + 32
				this.tableHeight = { 'height':`calc(100% - ${asda +'px'})` }   
			}
		}
	}
</script>

<style>

</style>